
import React from "react";
import { Form, Col, Input, Row, Button,Space } from "antd";
import { MinusCircleOutlined} from "@ant-design/icons";

 export default function methodGroup(){

    return(


        
   <Col span={24} >
           
   <Form.List
name="methodGroups"
>
{(fields, { add, remove }) => {
 return(
   <>
   <Row>
     <Col span={20}>
     <div className="headlineClass">
     做法
  
   </div>
    
     </Col>
     <Col span={4}>
     <Form.Item style={{width:200,marginTop:20}}>
     <Button style={{height:40}} type="dashed" onClick={() => add()} >
       添加做法组
     </Button>
     </Form.Item>
     </Col>
   </Row>
   
  
   {fields.map((field) => (
   
   
    
     <Row key={field.key}>
       <Col span={10}>
         <Space>

         <Row className="divfix">
         <Col span={8}  className="leftCommDiv">
           做法组名
         </Col>
         <Col span={14}>
                <Form.Item
                 name={[field.name, 'name']}
                     fieldKey={[field.fieldKey, 'name']}
                     rules={[{ required: true, message: 'Missing name' }]}
                   >
                     <Input />
                   </Form.Item>
           </Col>
           <Col span={2}>
           <MinusCircleOutlined style={{fontSize: '30px',marginTop:0}} onClick={() => remove(field.name)} />

           </Col>
         </Row>
               
             
         </Space>
         </Col>
       <Col span={14}>
       <Form.List
         {...field}
         label="子"
         name={[field.name, 'options']}
         fieldKey={[field.fieldKey, 'options']}
       >
        
               
    
         {(testList, { add: addtest, remove: removetest }) => {
             if (testList.length < 1) {
               addtest();
               testList = [{ fieldKey: 0, isListField: true, key: 0, name: 0 }];
           }
             console.log("父",fields,"---","子",testList)
        
           return(
             <>
             {testList.map((testItem) => {
              
             
             
               return (

                 <Row className="divfix" key={testItem.key}>
                 <Col span={8}  className="leftCommDiv">
                   做法{testItem.key+1}
                 </Col>
                 <Col span={14}>
                 <Form.Item
                     {...testItem}
                     name={[testItem.name, 'name']}
                     fieldKey={[testItem.fieldKey, 'name']}
                     rules={[{ required: true, message: 'Missing name' }]}
                   >
                     <Input />
                   </Form.Item>
                   </Col>
                   <Col span={2}>
                   <MinusCircleOutlined  style={{fontSize: '30px',marginTop:0}}  onClick={() => removetest(testItem.name)} />
                

                   </Col>
                </Row>
               );
             })}

             <Form.Item>
               <Button
                 type="dashed"
                 onClick={() => addtest()}
                 style={{width:'90%',marginLeft:20}}
               >
                 填加做法
               </Button>
             </Form.Item>
           </>
             
           );
         }
        
         }


       </Form.List>

       </Col>
     </Row>

   ))}

 
 </>
 )
}
}
</Form.List>

 </Col>

    )

 }